<template>
  <div class="detailsRoot">
    <el-card class="box-card">
      <div class="headerBox">
        <div class="title">
          {{ form.adPositionText }}
          <div class="jianyi">
            (建议图片上传尺寸比例：{{ form.imageUrlSize }})
          </div>
        </div>

        <div
          class="back"
          @click="
            $router.push({
              path: '/AdvertisingConfiguration',
              query: {
                index: $route.query.index,
              },
            })
          "
          style="cursor: pointer"
        >
          <img src="@/assets/image/icon/back.png" class="iconBox" alt="" />
          返回
        </div>
      </div>
      <el-divider></el-divider>
      <div class="headerBox">
        <el-radio-group
          v-model="radio1"
          @change="selectPage"
          v-if="form.priceFlag || form.adPositionText == '首页商家直供源头厂家'"
        >
          <el-radio-button
            style="margin-bottom: 10px"
            :label="index"
            v-for="(item, index) in form.advertisementVOList"
            :key="index"
            >{{ item.adPositionText }}</el-radio-button
          >
        </el-radio-group>
        <el-button
          v-if="form.adFlag == 1"
          type="primary"
          icon="el-icon-plus"
          plain
          @click="dialogVisible = true"
          >选择商品</el-button
        >
        <el-button
          v-if="form.adFlag == 2"
          type="primary"
          icon="el-icon-plus"
          plain
          @click="dialogVisibleB = true"
          >选择店铺</el-button
        >
      </div>
      <el-divider v-if="form.priceFlag"></el-divider>
      <div
        class="listBox"
        v-if="
          form.adFlag == 1 &&
          form.advertisementVOList[this.radio1].isApply &&
          form.priceFlag
        "
      >
        <div class="list">
          <div class="newLisat">
            <div class="imgshop-box">
              <img
                :src="form.advertisementVOList[this.radio1].productPicture"
                alt=""
              />
            </div>
            <div class="WareName-goods">
              {{ form.advertisementVOList[this.radio1].productSpecification }}
            </div>
            <div class="SpecificationGood">
              {{ form.advertisementVOList[this.radio1].productName }}
            </div>

            <div class="price">
              <div>
                <span class="icon-price">￥</span>
                <span class="RetailPrice">{{
                  form.advertisementVOList[this.radio1].productPrice
                }}</span>
              </div>
              <div class="SalesQuantity-item">
                分销量 : {{ form.advertisementVOList[this.radio1].salesPoints }}
              </div>
            </div>
          </div>
          <div
            class="Position-replacement"
            @click="deleteAdvertisementInfo(form.advertisementVOList[radio1])"
          >
            <!-- <div class="box-position"></div> -->
            <div class="box-position2">
              <div>移除</div>
            </div>
          </div>
          <!-- <div class="Position-replacement">
            <div class="box-position"></div>
            <div class="box-position2">
              <div>移除</div>
            </div>
          </div> -->
        </div>
      </div>
      <div
        class="listBoxB"
        v-if="form.adFlag == 2 && form.advertisementVOList[this.radio1].isApply"
      >
        <div class="headerBox">
          <div class="leftText">
            {{ form.advertisementVOList[this.radio1].storeName }}
            <div
              class="huangBtn"
              v-if="form.advertisementVOList[this.radio1].storeTimeFlag"
            >
              {{ form.advertisementVOList[this.radio1].storeTimeFlag }}年店
            </div>
          </div>
          <div class="rightBtn">
            <img
              v-if="form.advertisementVOList[this.radio1].returnGoods"
              src="@/assets/image/icon/tui.png"
              class="huanIcon"
              alt=""
            />
            <img
              v-if="form.advertisementVOList[this.radio1].exchangeGoods"
              src="@/assets/image/icon/huan.png"
              class="huanIcon"
              alt=""
            />
          </div>
        </div>
        <el-divider></el-divider>
        <div class="contentBox">
          <div class="dataBox">
            <div class="dataList">
              商家地址：{{ form.advertisementVOList[this.radio1].storeAddress }}
            </div>
            <div class="dataList">
              商家电话：{{ form.advertisementVOList[this.radio1].storePhone }}
            </div>
          </div>
          <div class="dataBox newDataBox">
            <div class="dataList">
              商品数量：{{
                form.advertisementVOList[this.radio1].storeProductNumber
              }}款
            </div>
            <div class="dataList">
              年总销量：{{
                form.advertisementVOList[this.radio1].storeTotalNumber
              }}件
            </div>
            <div class="dataList">
              最近上新：{{
                form.advertisementVOList[this.radio1].storeRecentlyUpdated
              }}
            </div>
          </div>
        </div>
        <div class="shopsImg">
          <img
            :class="index == 4 ? 'newImgB' : ' '"
            v-for="(item1, index) in form.advertisementVOList[this.radio1]
              .storePicture"
            :key="index"
            :src="item1"
            class="newImg"
            alt=""
          />
        </div>
      </div>
      <div class="hfBox" v-if="form.adFlag == 0">
        <div class="ylt" v-if="form.adPositionText == '首页店铺大牌'">
          广告语
          <el-input
            style="width: 300px; margin-left: 20px"
            v-model="form.advertisementVOList[radio1].text"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="ylt" v-if="form.adPositionText == '首页顶部对联'">
          左侧对联:
          <el-upload
            :action="action + '/common/upload/file'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessB"
            :before-upload="beforeAvatarUpload"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </div>
        <div
          v-if="
            form.adPositionText == '首页顶部对联' &&
            form.advertisementVOList[this.radio1].imageUrl[0]
          "
          class="imgBox"
        >
          <img
            style="max-width: 100%"
            :src="form.advertisementVOList[this.radio1].imageUrl[0]"
            alt=""
          />
        </div>
        <div class="ylt" v-if="form.adPositionText == '首页顶部对联'">
          右侧对联:
          <el-upload
            :action="action + '/common/upload/file'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessC"
            :before-upload="beforeAvatarUpload"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </div>
        <div
          v-if="
            form.adPositionText == '首页顶部对联' &&
            form.advertisementVOList[this.radio1].imageUrl[1]
          "
          class="imgBox"
        >
          <img
            style="max-width: 100%"
            :src="form.advertisementVOList[this.radio1].imageUrl[1]"
            alt=""
          />
        </div>
        <div class="ylt" v-if="form.adPositionText !== '首页顶部对联'">
          预览图:
          <el-upload
            :action="action + '/common/upload/file'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </div>
        <div
          v-if="
            form.advertisementVOList[this.radio1].imageUrl &&
            form.adPositionText !== '首页顶部对联'
          "
          class="imgBox"
        >
          <img
            style="max-width: 100%"
            :src="form.advertisementVOList[this.radio1].imageUrl"
            alt=""
          />
        </div>
        <div class="ylt">
          指定店铺:
          {{ storeName }}
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="dialogVisibleC = true"
            >选择店铺</el-button
          >
        </div>
        <div
          style="margin-top: 20px"
          class="listBoxB"
          v-if="form.advertisementVOList[this.radio1].isApply"
        >
          <div class="headerBox">
            <div class="leftText">
              {{ form.advertisementVOList[this.radio1].storeName }}
              <div
                class="huangBtn"
                v-if="form.advertisementVOList[this.radio1].storeTimeFlag"
              >
                {{ form.advertisementVOList[this.radio1].storeTimeFlag }}年店
              </div>
            </div>
            <div class="rightBtn">
              <img
                v-if="form.advertisementVOList[this.radio1].returnGoods"
                src="@/assets/image/icon/tui.png"
                class="huanIcon"
                alt=""
              />
              <img
                v-if="form.advertisementVOList[this.radio1].exchangeGoods"
                src="@/assets/image/icon/huan.png"
                class="huanIcon"
                alt=""
              />
            </div>
          </div>
          <el-divider></el-divider>
          <div class="contentBox">
            <div class="dataBox">
              <div class="dataList">
                商家地址：{{
                  form.advertisementVOList[this.radio1].storeAddress
                }}
              </div>
              <div class="dataList">
                商家电话：{{ form.advertisementVOList[this.radio1].storePhone }}
              </div>
            </div>
            <div class="dataBox newDataBox">
              <div class="dataList">
                商品数量：{{
                  form.advertisementVOList[this.radio1].storeProductNumber
                }}款
              </div>
              <div class="dataList">
                年总销量：{{
                  form.advertisementVOList[this.radio1].storeTotalNumber
                }}件
              </div>
              <div class="dataList">
                最近上新：{{
                  form.advertisementVOList[this.radio1].storeRecentlyUpdated
                }}
              </div>
            </div>
          </div>
          <div class="shopsImg">
            <img
              :class="index == 4 ? 'newImgB' : ' '"
              v-for="(item1, index) in form.advertisementVOList[this.radio1]
                .storePicture"
              :key="index"
              :src="item1"
              class="newImg"
              alt=""
            />
          </div>
        </div>
        <el-button
          type="primary"
          style="margin-top: 20px"
          @click="setAdvertisementInfoB"
          >保存</el-button
        >
      </div>
      <div
        class="listBox"
        v-if="form.adFlag == 1 && !form.flag && !form.priceFlag"
        style="margin-bottom: 30px"
      >
        <div
          v-for="(item, index) in form.advertisementVOList"
          :key="index"
          style="margin-top: 30px"
        >
          <div class="list" v-if="item.isApply">
            <div class="newLisat">
              <div class="imgshop-box">
                <img :src="item.productPicture" alt="" />
              </div>
              <div class="WareName-goods">
                {{ item.productSpecification }}
              </div>
              <div class="SpecificationGood">
                {{ item.productName }}
              </div>

              <div class="price">
                <div>
                  <span class="icon-price">￥</span>
                  <span class="RetailPrice">{{ item.productPrice }}</span>
                </div>
                <div class="SalesQuantity-item">
                  分销量 : {{ item.salesPoints }}
                </div>
              </div>
            </div>
            <div
              class="Position-replacement"
              @click="deleteAdvertisementInfo(item)"
            >
              <!-- <div class="box-position"></div> -->
              <div class="box-position2">
                <div>移除</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" width="50%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">选择商品</div>
        <div class="chahao" @click="dialogVisible = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 10px">
        <div style="display: flex; justify-content: space-between">
          <el-form :inline="true" :model="formB" class="demo-form-inline">
            <el-form-item label=" ">
              <el-input
                v-model="formB.productCode"
                placeholder="商品货号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                style="padding: 9px 10px"
                type="primary"
                icon="el-icon-search"
                @click="selectAllByParams"
              ></el-button>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formB" class="demo-form-inline">
            <el-form-item>
              <el-button
                @click="plAdd"
                style="padding: 9px 10px"
                type="primary"
                :disabled="!shopListId.length"
                >批量添加</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="tableBox">
          <el-table
            :data="shopList"
            header-cell-class-name="tableHeader"
            style="width: 100%"
            height="51vh"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="date" label="商品图片/货号">
              <template slot-scope="scope">
                <div class="shopsData">
                  <img :src="scope.row.pictureOriginal" class="newImg" alt="" />
                  <div class="shopsDataBox">
                    <div class="nameBox">{{ scope.row.specification  }}</div>
                    <div class="Model">{{ scope.row.storeName }}</div>
                    <div class="Model">
                      {{ scope.row.productColorNumber }}色
                      {{ scope.row.productYardNumber }}码
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="address" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="setAdvertisementInfo(scope.row.id)"
                  >确认添加</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="btnBox">
        <!-- <el-button type="primary"> 确定</el-button> -->
        <el-button @click="dialogVisible = false"> 取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleB" width="50%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">选择店铺</div>
        <div class="chahao" @click="dialogVisibleB = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 10px">
        <el-form :inline="true" :model="formC" class="demo-form-inline">
          <el-form-item label=" ">
            <el-input v-model="formC.keyword" placeholder="店铺名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="padding: 9px 10px"
              type="primary"
              icon="el-icon-search"
              @click="selectAllStore"
            ></el-button>
          </el-form-item>
        </el-form>
        <div class="tableBox">
          <el-table
            :data="storeList"
            header-cell-class-name="tableHeader"
            style="width: 100%"
            height="51vh"
          >
            <el-table-column prop="storeName" label="店铺名称">
            </el-table-column>
            <el-table-column prop="address" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="setAdvertisementInfo(scope.row.id)"
                  >确认添加</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <div></div>
            <el-pagination
              @size-change="storeHandleSizeChange"
              @current-change="storeHandleCurrentChange"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="StoreTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="btnBox">
        <!-- <el-button type="primary"> 确定</el-button> -->
        <el-button @click="dialogVisibleB = false"> 取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleC" width="50%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">选择店铺</div>
        <div class="chahao" @click="dialogVisibleC = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 10px">
        <el-form :inline="true" :model="formC" class="demo-form-inline">
          <el-form-item label=" ">
            <el-input v-model="formC.keyword" placeholder="店铺名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="padding: 9px 10px"
              type="primary"
              icon="el-icon-search"
              @click="selectAllStore"
            ></el-button>
          </el-form-item>
        </el-form>
        <div class="tableBox">
          <el-table
            :data="storeList"
            header-cell-class-name="tableHeader"
            style="width: 100%"
            height="51vh"
          >
            <el-table-column prop="storeName" label="店铺名称">
            </el-table-column>
            <el-table-column prop="address" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="getStoreId(scope.row)"
                  >确认添加</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <div></div>
            <el-pagination
              @size-change="storeHandleSizeChange"
              @current-change="storeHandleCurrentChange"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="StoreTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="btnBox">
        <!-- <el-button type="primary"> 确定</el-button> -->
        <el-button @click="dialogVisibleC = false"> 取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  selectMyAdByPosition,
  selectAllByParams,
  setAdvertisementInfo,
  selectAllStore,
  deleteAdvertisementInfo,
} from "@/api/AdvertisingManagement";
import imgPath from "@/utils/config";
export default {
  name: "login",
  data() {
    return {
      dialogVisibleC: false,
      dialogVisibleB: false,
      form: {
        advertisementVOList: [],
      },
      radio1: 0,
      dialogVisible: false,
      formB: {
        pageNumber: 1,
        pageSize: 20,
        categoryId: "",
        market: "",
        priceRange: "",
        attributes: [],
        lookingFor: "",
        channelId: "",
        orderBy: "",
      },
      shopList: [],
      total: null,
      StoreTotal: null,
      storeList: [],
      formC: {
        pageNumber: 1,
        pageSize: 20,
        keyword: "",
      },
      formD: {
        storePicture: null,
      },
      action: "",
      StoreId: null,
      storeName: "",
      shopListId: [],
    };
  },
  created() {
    this.selectMyAdByPosition();
    this.action = imgPath.imgPath;
  },
  methods: {
    //批量添加
    plAdd() {
      let arr = [];
      this.shopListId.forEach((item) => {
        arr.push(item.id);
      });
      this.setAdvertisementInfo(arr.join(","));
    },
    //获取多选
    handleSelectionChange(val) {
      this.shopListId = val;
    },
    //删除广告中的商品
    deleteAdvertisementInfo(item) {
      deleteAdvertisementInfo({
        idList: `${item.id}`,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "移除成功",
            type: "success",
          });
          item.isApply = false;
          // this.selectMyAdByPosition();
        }
      });
    },
    //保存横幅广告信息
    setAdvertisementInfoB() {
      let params = {};
      if (this.form.adPositionText == "首页顶部对联") {
        params = {
          id: this.form.advertisementVOList[this.radio1].id,
          storeId: this.StoreId,
          adFlag: this.form.adFlag,
          imageUrl:
            this.form.advertisementVOList[this.radio1].imageUrl.join(","),
        };
      } else if (this.form.adPositionText == "首页店铺大牌") {
        params = {
          id: this.form.advertisementVOList[this.radio1].id,
          storeId: this.StoreId,
          adFlag: this.form.adFlag,
          imageUrl: this.form.advertisementVOList[this.radio1].imageUrl,
          text: this.form.advertisementVOList[this.radio1].text,
        };
      } else {
        params = {
          id: this.form.advertisementVOList[this.radio1].id,
          storeId: this.StoreId,
          adFlag: this.form.adFlag,
          imageUrl: this.form.advertisementVOList[this.radio1].imageUrl,
        };
      }

      setAdvertisementInfo(params).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "配置成功",
            type: "success",
          });
          this.dialogVisibleC = false;
          this.selectMyAdByPosition();
        }
      });
    },
    //获取店铺id
    getStoreId(row) {
      this.StoreId = row.id;
      this.storeName = row.storeName;
      this.dialogVisibleC = false;
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.form.advertisementVOList[this.radio1].imageUrl = res.data;
    },
    handleAvatarSuccessB(res, file) {
      this.form.advertisementVOList[this.radio1].imageUrl[0] = res.data;
      console.log(this.form.advertisementVOList[this.radio1].imageUrl);
      this.$forceUpdate();
    },
    handleAvatarSuccessC(res, file) {
      console.log(res);
      this.form.advertisementVOList[this.radio1].imageUrl[1] = res.data;
      this.$forceUpdate();
    },
    //图片校验
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 3MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      }
      return true;
    },
    //店铺分页
    storeHandleSizeChange(val) {
      this.formC.pageNumber = val;
      this.selectAllStore();
    },
    storeHandleCurrentChange(val) {
      this.formC.pageNumber = val;
      this.selectAllStore();
    },
    //获取所有店铺
    selectAllStore() {
      selectAllStore(this.formC).then((data) => {
        this.storeList = data.data.records;
        this.StoreTotal = data.data.total;
      });
    },

    //配置广告
    setAdvertisementInfo(id) {
      let params = {};
      if (this.form.adFlag == 1 && this.form.flag) {
        params = {
          id: this.form.advertisementVOList[this.radio1].id,
          productId: id,
          adFlag: this.form.adFlag,
        };
      } else if (this.form.adFlag == 2) {
        params = {
          id: this.form.advertisementVOList[this.radio1].id,
          storeId: id,
          adFlag: this.form.adFlag,
        };
      } else if (this.form.adFlag == 1 && !this.form.flag) {
        params = {
          adPosition: this.form.adPosition,
          productId: id,
          adFlag: this.form.adFlag,
        };
      }
      setAdvertisementInfo(params).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "配置成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.dialogVisibleB = false;
          this.selectMyAdByPosition();
        }
      });
    },
    // 获取商品列表
    selectAllByParams() {
      selectAllByParams(this.formB).then((data) => {
        this.shopList = data.data.records;
        this.total = data.data.total;
      });
    },
    selectPage() {},
    //获取广告详情
    selectMyAdByPosition() {
      selectMyAdByPosition({
        adPosition: this.$route.query.adPosition,
      }).then((data) => {
        this.form = data.data;
        if (this.form.adFlag == 1) {
          this.selectAllByParams();
        }
        if (this.form.adFlag == 2 || this.form.adFlag == 0) {
          this.selectAllStore();
        }
        if (this.form.adPositionText == "首页顶部对联") {
          this.form.advertisementVOList[0].imageUrl =
            this.form.advertisementVOList[0].imageUrl.split(",");
        }
        if (this.form.advertisementVOList[this.radio1].storeId) {
          this.StoreId = this.form.advertisementVOList[this.radio1].storeId;
        }
      });
    },
  },
  watch: {
    radio1() {
      this.storeName = "";
      if (this.form.advertisementVOList[this.radio1].storeId) {
        this.StoreId = this.form.advertisementVOList[this.radio1].storeId;
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  /deep/ .el-pagination__editor.el-input .el-input__inner {
    height: 28px !important;
  }

  /deep/ .el-input--mini .el-input__inner {
    height: 28px !important;
  }
}
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-form-item__content {
    width: 90%;
  }
  /deep/ .el-select {
    width: 100%;
  }
  /deep/ .tableHeader {
    background: #edf3ff;
    font-weight: 700;
    color: #666666;
    padding: 5px 0;
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/assets/image/icon/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      color: #e65f00;
      cursor: pointer;
    }
  }
  /deep/ .el-input {
    // width: 100% !important;
  }
}
/deep/ .el-dialog__header {
  font-weight: 700;
}
/deep/ .demo-ruleForm {
  padding: 10px;
}

/deep/ .el-form-item {
  margin-bottom: 8px;
}
/deep/ .el-form-item__error {
  z-index: 99;
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
.dialogTextBox {
  font-size: 14px;
  color: #000000;
}
.tableBox {
  /deep/ .tableHeader {
    background: #ebeff5;
    font-weight: 400;
    color: #000;
  }
  .shopsData {
    display: flex;
    .newImg {
      width: 80px;
      height: 80px;
      border-radius: 10px;
    }
    .shopsDataBox {
      margin-left: 10px;
      .nameBox {
        font-size: 14px;
      }
      .Model {
        color: #999999;
        margin-top: 8px;
        font-size: 12px;
      }
    }
  }
  .lvBox {
    color: #07c160;
  }
  .hongBox {
    color: #e22a1f;
  }
}
/deep/ .el-card__body {
  min-height: 82vh;
}
.detailsRoot {
  padding: 20px;
  padding-left: 5px;
  // padding-bottom: 60px;

  .headerBox {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: 700;
      font-size: 16px;
      display: flex;
      align-items: center;
      .jianyi {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
    .back {
      width: 66px;
      height: 30px;
      background: #49adef;
      color: #fff;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      align-items: center;
      line-height: 30px;
      font-size: 14px;
      .iconBox {
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-left: 7px;
        margin-right: 2px;
      }
    }
  }
  .listBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    .list {
      height: 310px;
      opacity: 1;
      background: #f9f9f9ff;
      margin-right: 20px;

      .newLisat {
        padding: 12px 12px 0;
        margin-bottom: 12px;
      }
      .Position-replacement {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .box-position {
          width: 123px;
          height: 32px;
          opacity: 1;
          background: #ebebebff;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .active {
            opacity: 0.64999998;
            color: rgba(0, 0, 0, 0.45);
          }
          div {
            height: 22px;
            color: rgba(0, 0, 0, 1);
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            line-height: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
          }
        }
        .box-position2 {
          width: 100%;
          height: 32px;
          opacity: 1;
          background: #ebebebff;
          display: flex;
          justify-content: space-around;
          align-items: center;
          cursor: pointer;
        }
      }
      .imgshop-box {
        width: 200px;
        height: 200px;
        opacity: 1;
        text-align: center;
        margin-bottom: 12px;
        overflow: hidden;
        background: #000;
        img {
          border: 0;
          border-style: none;
          vertical-align: middle;
          width: 100%;
        }
      }
      .SpecificationGood {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 195px;
        height: 22px;
        opacity: 1;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        line-height: 22px;
      }
      .WareName-goods {
        width: 195px;
        height: 22px;
        opacity: 1;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        font-weight: 400;
        text-align: left;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon-price {
          width: 8px;
          height: 12px;
          opacity: 1;
          color: #ec5c70;
          font-size: 12px;
          font-weight: 600;
          text-align: left;
          line-height: 12px;
        }
        .RetailPrice {
          height: 22px;
          opacity: 1;
          color: #ec5c70;
          font-size: 16px;
          font-weight: 600;
          font-family: PingFang SC;
          text-align: left;
          line-height: 22px;
        }
      }
      .SalesQuantity-item {
        height: 12px;
        opacity: 1;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        font-weight: 400;
        text-align: left;
        line-height: 12px;
      }
    }
  }
  .listBoxB {
    background: #f5f7f9;
    margin-bottom: 20px;
    padding: 20px;
    width: 400px;
    /deep/ .el-divider {
      margin: 10px 0;
    }
    .headerBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .leftText {
        font-weight: 700;
        font-size: 18px;
        display: flex;
        align-items: center;
        .huangBtn {
          background: #ffc766;
          border-radius: 20px;
          width: 60px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          text-align: center;
          margin-left: 10px;
        }
      }
      .rightBtn {
        display: flex;
        align-items: center;
        .hongBtn {
          color: #e22a1f;
          border-radius: 20px;
          width: 70px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          text-align: center;
          margin-left: 10px;
          border: 1px solid #e22a1f;
          cursor: pointer;
        }
        .huanIcon {
          width: 20px;
          height: 20px;
          margin-left: 10px;
        }
      }
    }
    .contentBox {
      display: flex;
      justify-content: space-between;
      .dataBox {
        width: 50%;
        .dataList {
          font-size: 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-overflow: ellipsis;
          margin-bottom: 10px;

          .newDataList {
            display: flex;
            align-items: center;
            .lvBtn {
              width: 80px;
              height: 0.2rem;
              line-height: 0.2rem;
              background: #07c160;
              display: flex;
              align-items: center;
              border-radius: 2px;
              font-size: 0.08rem;
              color: #fff;
              margin-right: 0.1rem;
              .xiaoIcon {
                height: 0.12rem;
                width: 0.12rem;
                margin: 0 5px;
              }
            }
            .lanBtn {
              background: #399ef1;
            }
          }
        }
      }
      .newDataBox {
        width: 40%;
        padding-left: 20px;
        border-left: 1px solid #dcdfe6;
      }
    }
    .shopsImg {
      display: flex;
      margin-top: 10px;
      .newImg {
        width: 19%;
        height: 0.8rem;
        margin-right: 0.1rem;
      }
      .newImgB {
        margin-right: 0;
      }
    }
  }
  .hfBox {
    .ylt {
      margin-top: 20px;
      display: flex;
      align-items: center;
      /deep/ .el-button {
        margin-left: 20px;
      }
    }
    .imgBox {
      width: 100%;

      margin: 20px 0;
    }
  }
}
@media (max-width: 1800px) {
  .detailsRoot {
    padding: 20px;
    padding-left: 5px;
    padding-bottom: 60px;

    .headerBox {
      display: flex;
      justify-content: space-between;
      .title {
        font-weight: 700;
        font-size: 16px;
      }
      .back {
        width: 66px;
        height: 30px;
        background: #49adef;
        color: #fff;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        align-items: center;
        line-height: 30px;
        font-size: 14px;
        .iconBox {
          width: 18px;
          height: 18px;
          vertical-align: middle;
          margin-left: 7px;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
  